<template>
	<div class="home-category">
		<ul class="menu">
			<li v-for="c1 in categoryStore.categoryList" :key="c1.id">
				<RouterLink to="/">{{ c1.name }}</RouterLink>
				<RouterLink v-for="c2 in c1.children.slice(0, 2)" :key="c2.id" to="/">
					{{ c2.name }}
				</RouterLink>
				<!-- 弹层layer位置 -->
				<div class="layer">
					<h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
					<ul>
						<li v-for="g in c1.goods" :key="g.id">
							<RouterLink :to="`/goods-detail/${g.id}`">
								<img :src="g.picture" />
								<div class="info">
									<p class="name ellipsis-2">{{ g.name }}</p>
									<p class="desc ellipsis">{{ g.desc }}</p>
									<p class="price"><i>¥</i>{{ g.price }}</p>
								</div>
							</RouterLink>
						</li>
					</ul>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'HomeCategory',
	}
</script>

<script setup>
	import { useCategoryStore } from '@/stores/category'

	const categoryStore = useCategoryStore()
</script>

<style scoped lang="scss">
	.home-category {
		width: 250px;
		height: 500px;
		background: rgba(0, 0, 0, 0.8);
		position: relative;
		z-index: 99;

		.menu {
			li {
				padding-left: 40px;
				height: 55px;
				line-height: 55px;

				&:hover {
					background: $xtxColor;
				}

				a {
					margin-right: 4px;
					color: #fff;

					&:first-child {
						font-size: 16px;
					}
				}

				.layer {
					width: 990px;
					height: 500px;
					background: rgba(255, 255, 255, 0.8);
					position: absolute;
					left: 250px;
					top: 0;
					display: none;
					padding: 0 15px;

					h4 {
						font-size: 20px;
						font-weight: normal;
						line-height: 80px;

						small {
							font-size: 16px;
							color: #666;
						}
					}

					ul {
						display: flex;
						flex-wrap: wrap;

						li {
							width: 310px;
							height: 120px;
							margin-right: 15px;
							margin-bottom: 15px;
							border: 1px solid #eee;
							border-radius: 4px;
							background: #fff;

							&:nth-child(3n) {
								margin-right: 0;
							}

							a {
								display: flex;
								width: 100%;
								height: 100%;
								align-items: center;
								padding: 10px;

								&:hover {
									background: #e3f9f4;
								}

								img {
									width: 95px;
									height: 95px;
								}

								.info {
									padding-left: 10px;
									line-height: 24px;
									overflow: hidden;

									.name {
										font-size: 16px;
										color: #666;
									}

									.desc {
										color: #999;
									}

									.price {
										font-size: 22px;
										color: $priceColor;

										i {
											font-size: 16px;
										}
									}
								}
							}
						}
					}
				}

				// 关键样式  hover状态下的layer盒子变成block
				&:hover {
					.layer {
						display: block;
					}
				}
			}
		}
	}
</style>
